<template>
  <div class="edit-info">
    <div class="leftBox">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>基本资料</span>
        </div>
        <div class="avatarBox">
          <UploadImg :multiple="false" :limitSize="1" :limitNumber="1"></UploadImg>
        </div>
        <div class="formBox">
          <el-form ref="userInfoForm" label-position="right" label-width="80px" :model="userInfo">
            <el-form-item label="用户名">
              <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="userInfo.mobile"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="用户角色">
              <el-tag>{{USER_TYPE[userInfo.permission]}}</el-tag>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUserInfo" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="rightBox">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>登陆信息</span>
        </div>
        <div class="formBox">
          <el-form ref="userInfoForm" label-position="right" label-width="80px" :model="loginInfo">
            <el-form-item label="修改密码">
              <el-input
                v-model="loginInfo.password"
                type="password"
                placeholder="请输入修改密码"
                id="password"
              >
                <i
                  slot="suffix"
                  class="iconfont icon-yanjing1"
                  @mouseover="hoverPassword('password',$event)"
                  @mouseleave="hoverPassword('password',$event)"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input
                v-model="loginInfo.confirmPassword"
                type="password"
                placeholder="请确认修改密码"
                id="confirmPassword"
              >
                <i
                  slot="suffix"
                  class="iconfont icon-yanjing1"
                  @mouseover="hoverPassword('confirmPassword',$event)"
                  @mouseleave="hoverPassword('confirmPassword',$event)"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitLoginInfo" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>主题修改</span>
        </div>
        <div class="formBox">
          <el-form ref="userInfoForm" label-position="right" label-width="80px" :model="theme">
            <el-form-item label="当前主题">
              <label for>{{currencyTheme}}</label>
            </el-form-item>
            <el-form-item label="主题">
              <el-select v-model="theme.name" placeholder="请选择样式主题">
                <el-option
                  v-for="(item,index) in themeList"
                  :label="item"
                  :value="item"
                  :disabled="item === currencyTheme"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitTheme" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/other/upload-img";
export default {
  name: "edit-info",
  components: {
    UploadImg
  },
  data() {
    return {
      USER_TYPE: this.$common.USER_TYPE,
      id: window.localStorage.getItem("userId"),
      loginInfo: {
        password: "",
        confirmPassword: ""
      },
      theme: {
        name: ""
      },
      currencyTheme: "primary",
      themeList: ["primary", "material", "terminal"],
      userInfo: JSON.parse(JSON.stringify(this.$store.state.user))
    };
  },
  computed: {
    user() {
      return JSON.parse(JSON.stringify(this.$store.state.user));
    }
  },
  watch: {
    user(val) {
      this.userInfo = JSON.parse(JSON.stringify(val));
    }
  },
  methods: {
    hoverPassword(passwordId, evt) {
      //鼠标经过显示密码
      let passwordDom = document.getElementById(passwordId);
      let type = passwordDom.getAttribute("type");
      if (type === "password") {
        passwordDom.setAttribute("type", "text");
        evt.target.setAttribute("class", "iconfont icon-yanjing");
      } else if (type === "text") {
        passwordDom.setAttribute("type", "password");
        evt.target.setAttribute("class", "iconfont icon-yanjing1");
      }
    },
    submitUserInfo() {
      this.$api.user.editUserInfo(this.userInfo).then(res => {
        this.$utils.setUser();
        this.$message.success("提交基本资料成功");
      });
    },
    submitLoginInfo() {
      if (!this.validateChangePwd()) {
        return;
      }
      this.$http
        .post(
          "/api/user/editPassword",
          {
            id: this.id,
            username: this.loginInfo.username,
            password: this.loginInfo.password
          },
          {}
        )
        .then(res => {
          if (res.data.affectedRows === 1) {
            this.$message.success("修改登陆信息成功");
            this.loginInfo.password = "";
            this.loginInfo.confirmPassword = "";
            this.getUserInfo();
          }
        });
    },
    submitTheme() {
      this.$http
        .post(
          "/api/user/editTheme",
          {
            theme: this.theme.name,
            id: this.id
          },
          {}
        )
        .then(res => {
          if (res.data.affectedRows === 1) {
            this.$message.success("修改主题成功");
            this.theme.name = "";
            this.getUserInfo();
          }
        });
    },
    validateChangePwd() {
      if (this.loginInfo.password === "") {
        this.$message.error("密码不能为空");
        return false;
      } else if (this.loginInfo.confirmPassword === "") {
        this.$message.error("确认密码不能为空");
        return false;
      } else if (this.loginInfo.password !== this.loginInfo.confirmPassword) {
        this.$message.error("两次输入密码不一致");
        return false;
      }
      return true;
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.edit-info {
  width: 100%;
  .box-card {
    margin-bottom: 20px;
  }
  .leftBox {
    vertical-align: top;
    padding-right: 10px;
    display: inline-block;
    width: 48%;
    .avatarBox {
      text-align: center;
    }
  }
  .rightBox {
    vertical-align: top;
    padding-left: 10px;
    display: inline-block;
    width: 48%;
  }
  .formBox {
    margin: 20px;
  }
}
</style>